 <!DOCTYPE html>
 <html>

 <head>
   <title>register.html</title>
   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="this is my page">
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <LINK rel="Shortcut icon" href="favicon.ico" />
   <link rel="stylesheet" type="text/css" href="css/register.css" />
   <style>
     body {
       background-image: url("../images/bg.jpg");
       text-align: center;
       background-repeat: repeat-x;
       background-position: 0px 0px;
     }

     .table {
       border: 1px solid #90BFFF;
       width: 810px;
     }

     tr {
       font-family: 微软雅黑;
       font-weight: 800;
       color: #448EF3;
     }

     input {
       border: 1px solid #448EF3;
       color: #448EF3;
       font-weight: bold;
       font-family: "微软雅黑";
       height: 35px;
       line-height: 30px;
       border-radius: 5px;
     }

     .submit {
       width: 150px;
       height: 40px;
       cursor: hand;
       font-size: 20px;
       color: #ffffff;
       background-color: #448EF3;
       border: 0px;
     }

     .thead {
       height: 40px;
       background: #90BFFF;
       font-family: "微软雅黑";
       font-size: 30px;
       font-weight: 700;
       color: #ffffff;
       background: #90BFFF;
     }

     #3 {
       margin-bottom: 100px;
     }

   </style>
   <script>
     function ChkAllClick(sonName, cbAllId) {
       var arrSon = document.getElementsByName(sonName);
       var cbAll = document.getElementById(cbAllId);
       var tempState = cbAll.checked;
       for (i = 0; i < arrSon.length; i++) {
         if (arrSon[i].checked != tempState)
           arrSon[i].click();
       }
     }

     function ChkSonClick(sonName, cbAllId) {
       var arrSon = document.getElementsByName(sonName);
       var cbAll = document.getElementById(cbAllId);
       for (var i = 0; i < arrSon.length; i++) {
         if (!arrSon[i].checked) {
           cbAll.checked = false;
           return;
         }
       }
       cbAll.checked = true;
     }

     function ChkOppClick(sonName) {
       var arrSon = document.getElementsByName(sonName);
       for (i = 0; i < arrSon.length; i++) {
         arrSon[i].click();
       }
     }

     function changeBgColor(btn) {
       var btn = document.getElementById(btn);
       btn.style.backgroundColor = "#90BFFF"
     }

     function recoverBgColor(btn) {
       var btn = document.getElementById(btn);
       btn.style.backgroundColor = "#448EF3"
     }

   </script>
   <script src="js/checkbox.js" type="text/javascript">
   </script>
   <script type="text/javascript">
     function play() {
       document.getElementById("menu_item").style.display = "";
     }

     function noplay() {
       document.getElementById("menu_item").style.display = "none";
     }

     function passwd() {
       var pass = document.getElementById("password").value;
       var tip = document.getElementById("tip");
       if (pass.length < 4) {
         document.getElementById("meter").value = pass.length;
         tip.innerHTML = "差";
       } else
       if (pass.length <= 8) {
         document.getElementById("meter").value = pass.length;
         tip.innerHTML = "中";
       } else {
         document.getElementById("meter").value = pass.length;
         tip.innerHTML = "高";
       }
     }

   </script>
 </head>

 <body>
   <div id="3" style="position: relative; top: 100px; z-index: 3;">
     <form id="f1" action="register.html" method="post">
       <table align="center" cellspacing="0" class="table">
         <tr class="thead">
           <td align="center">
             会员注册
           </td>
         </tr>
         <tr>
           <td>
             <table id="registertable" border="0px" align="center" border="0px" cellspacing="0" cellpadding="5px">
               <tr>
               <tr>
                 <td align="right">
                   员工编号：
                 </td>
                 <td align="left">
                   <input type="text" name="username" placeholder="用户名" required />
                 </td>
               </tr>
               <tr>
                 <td align="right">
                   密 码：
                 </td>
                 <td align="left">
                   <input type="password" name="password" id="password" placeholder="密码" required onkeyup="passwd()" />
                   <meter min="1" max="10" low="5" high="8" value="0" id="meter">
                   </meter>
                   <span id="tip"></span>
                 </td>
               </tr>
               <tr>
                 <td align="right">
                   密码确认：
                 </td>
                 <td align="left">
                   <input type="password" name="password2" placeholder="确认密码" required />
                 </td>
               </tr>
               <tr>
                 <td align="right">
                   生 日：
                 </td>
                 <td align="left">
                   <input type="date" name="borthday" />
                 </td>
               </tr>
               <tr>
                 <td align="right">
                   性 别：
                 </td>
                 <td align="left">
                   <input type="radio" name="gender" value="0" checked />男
                   <input type="radio" name="gender" value="1" />女
                 </td>
               </tr>
               <tr>
                 <td align="right">
                   邮 箱：
                 </td>
                 <td align="left">
                   <input type="email" name="email" placeholder="邮箱" id="email" required />
                 </td>
               </tr>
               <tr>
                 <td align="right">
                   手 机：
                 </td>
                 <td align="left">
                   <input type="tel" pattern="[0-9]{11}" id="p" name="phone" placeholder="请输入11位数字" />
                 </td>
               </tr>
               <tr>
                 <td align="right">
                   地 址：
                 </td>
                 <td align="left">
                   <input type="text" name="address" placeholder="地址" list="l" />
                   <datalist id="l">
                     <option value="sh">上海</option>
                     <option value="bj">北京</option>
                     <option value="js">江苏</option>
                     <option value="zz">郑州</option>
                     <option value="sz">深圳</option>
                   </datalist>
                 </td>
               </tr>
               <tr>
                 <td align="right">
                   个人网页：
                 </td>
                 <td align="left">
                   <input type="url" name="page" placeholder="主页网址" />
                 </td>
               </tr>
               <tr>
                 <td align="right">
                   起床时间：
                 </td>
                 <td align="left">
                   <input type="time" name="bed" onblur="pro()" />
                 </td>
               </tr>
               <tr>
                 <td align="right">
                   头像：
                 </td>
                 <td align="left">
                   <input type="file" id="f" accept="image/jpeg" onchange="show()" /><span><img id="img" src=""
                       width="60" height="60" /></span>
                   <script>
                     function show() {
                       var file = document.getElementById("f").files[0];
                       var fileReader = new FileReader();
                       fileReader.readAsDataURL(file);
                       fileReader.onload = function () {
                         document.getElementById("img").src = fileReader.result;
                       }
                     }
                   </script>
                 </td>
               </tr>
               <tr>
                 <td colspan="2">
                   <details>
                     <p>
                       允许注册
                       <mark>
                         许可证
                       </mark>信息
                     </p>
                     <summary>
                       注册许可信息
                     </summary>
                   </details>
                 </td>
               </tr>
               <tr>
                 <td align="right">
                   验证码：
                 </td>
                 <td valign="middle">
                   <input type="text" name="captcha" size="11" maxlength="4" title="输入右边的验证码" />
                   <span id="span"></span>
                   <script>
                     var span = document.getElementById("span");
                     span.innerHTML = Math.floor(Math.random());

                   </script>
                 </td>
               </tr>
               <tr height="60px">
                 <td align="center" colspan="2">
                   <input type="button" value="转到登录" onclick="window.location.replace('login.html')" id="btn1"
                     onmousemove="changeBgColor('btn1')" onmouseout="recoverBgColor('btn1')" class="submit" /> <input
                     type="submit" accesskey="enter" value="注册" id="btn" onmousemove="changeBgColor('btn')"
                     onmouseout="recoverBgColor('btn');" class="submit" formmethod="post" />
                 </td>
               </tr>
             </table>
           </td>
         </tr>
       </table>
     </form>
   </div>
 </body>

 </html>
